今天學什麼？

今天閱讀「適用於 Android 開發人員的 Jetpack Compose」第一章「Compose 基礎知識」的「實作遷移作業」的 1~6 章

學習筆記

1. 搬家策略
   1. 使用 Compose 建構新畫面
   2. 在建構功能時找出可重複使用的元素，並開始建立常用 UI 元件的程式庫
   3. 逐一取代每個畫面的現有功能
2. 可能會用到的外掛

   dependencies {
       // Compose
       def composeBom = platform('androidx.compose:compose-bom:2022.10.00')
       implementation(composeBom)
       androidTestImplementation(composeBom)
   
       implementation "androidx.compose.runtime:runtime"
       implementation "androidx.compose.ui:ui"
       implementation "androidx.compose.foundation:foundation"
       implementation "androidx.compose.foundation:foundation-layout"
       implementation "androidx.compose.material:material"
       implementation "androidx.compose.runtime:runtime-livedata"
       implementation "androidx.compose.ui:ui-tooling"
   }
   

3. Fragment 搬家流程
   1. 在 Xml 使用ComposeView來取代 Layout 區塊
   2. 在 Fragment 建立 Compose 函式

      @Composable
      fun PlantDetailDescription() {
          Surface {
              Text("Hello Compose")
          }
      }
      

   3. Fragment 的 onCreateView 叫出 Compose

      class PlantDetailFragment : Fragment() {
          override fun onCreateView(...): View? {
              val binding = DataBindingUtil.inflate<FragmentPlantDetailBinding>(
                  inflater, R.layout.fragment_plant_detail, container, false
              ).apply {            
                  composeView.setContent {    //<----這裡
                      // You're in Compose world!
                      MaterialTheme {
                          PlantDetailDescription()
                      }
                  }
              }    
          }
      }
      

4. Xml 轉成 Compose 的差別

   <TextView        
       android:text="@{viewModel.plant.name}"
       android:textAppearance="?attr/textAppearanceHeadline5"
       android:layout_width="match_parent "        
       android:layout_marginStart="@dimen/margin_small"
       android:layout_marginEnd="@dimen/margin_small"
       android:gravity="center_horizontal"        
       />
   

   Text(
       text = name,
       style = MaterialTheme.typography.h5,
       modifier = Modifier
           .fillMaxWidth()
           .padding(horizontal = dimensionResource(R.dimen.margin_small))
           .wrapContentWidth(Alignment.CenterHorizontally)
       )